<template>
  <div
    style="
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      padding: 50px;
      overflow: auto;
      background: #f0f2f5;
    "
  >
    <div
      style="
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 100%;
        min-height: 100%;
        width: max-content;
      "
    >
      <div
        v-for="(step, index) in flow.Steps"
        :key="index"
        style="
          width: 100%;
          display: flex;
          align-items: center;
          flex-direction: column;
        "
      >
        <flow-branch
          :business="flow.Business"
          :actions="actions"
          :step="step"
          :conditionFields="conditionFields"
          v-if="step.FLS_Type == 4"
          :key="step.FLS_ID"
          @onRemove="removeStep(step, index)"
          @onCombineStep="combineStep(step, index)"
        ></flow-branch>
        <flowStep
          :business="flow.Business"
          :actions="actions"
          @onRemove="removeStep(step, index)"
          v-else
          :step="step"
        ></flowStep>
        <lineWrapper
          v-if="flow.Steps[index + 1] && flow.Steps[index + 1].FLS_Type == 4"
          :height="'60px'"
          :showBtn="true"
          @add="(type, defaultName) => addStep(step, index, type, defaultName)"
        ></lineWrapper>
        <lineWrapper
          v-else-if="flow.Steps[index + 1]"
          :showBtn="true"
          @add="(type, defaultName) => addStep(step, index, type, defaultName)"
        ></lineWrapper>
      </div>
    </div>
  </div>
</template>
<script>
import { saveFlow } from '@/api/flowCenter/flow/flowProcess'
import flowStep from './flowStep.vue'
import flowBranch from './flowBranch.vue'
import lineWrapper from './lineWrapper.vue'
import { generateGUID } from '@/utils/guid'
export default {
  props: ['flow', 'actions', 'conditionFields'],
  components: {
    flowStep,
    flowBranch,
    lineWrapper,
  },
  data() {
    return {
      newStep: null,
      removeSteps: [],
    }
  },
  computed: {},
  methods: {
    addStep(step, index, type, defaultName) {
      let guid = generateGUID()
      this.newStep = {
        FLOW_BusinessID: this.flow.FLOW_BusinessID,
        FLS_FlowId: this.flow.FLOW_ID,
        FLS_NextStepId: step.FLS_NextStepId,
        FLS_Name: defaultName,
        FLS_Guid: guid,
        FLS_Type: type,
        FLS_Position: 10, //主干
        FLS_ChoiceID: null,
        FLS_ChoiceDesc: null,
        IsNew: true,
      }
      if (type == 4) {
        this.newStep.Branchs = [
          {
            Steps: new Array(),
            FLB_StepId: guid,
            FLB_FlowId: step.FLS_FlowId,
            FLB_NextStepId: step.FLS_NextStepId,
            FLB_Guid: generateGUID(),
            FLB_Name: '分支1',
            FLB_Index: 1,
            IsNew: true,
            ConditionGroups: [],
          },
          {
            Steps: new Array(),
            FLB_StepId: guid,
            FLB_FlowId: step.FLS_FlowId,
            FLB_NextStepId: step.FLS_NextStepId,
            FLB_Guid: generateGUID(),
            FLB_Name: '默认分支',
            FLB_Index: 999,
            FLB_IsDefault: true,
            IsNew: true,
            ConditionGroups: [],
          },
        ]
      }
      if (step.FLS_Type == 4) {
        //在分支节点下添加新节点,需要将各个分支下个节点的ID设为新节点
        step.Branchs.forEach((x) => {
          if (x.Steps.length > 0) {
            x.Steps[x.Steps.length - 1].FLS_NextStepId = guid
            x.Steps[x.Steps.length - 1].IsModified = true
          } else {
            x.FLB_NextStepId = guid
            x.IsModified = true
          }
        })
      }
      step.FLS_NextStepId = guid
      step.IsModified = true
      this.flow.Steps.splice(index + 1, 0, this.newStep)
      this.$forceUpdate()
    },
    doSave() {
      saveFlow(this.flow).then((r) => this.doGetFlow(1))
    },
    removeStep(step, index) {
      var last = this.flow.Steps.find((s) => s.FLS_NextStepId == step.FLS_Guid)
      this.flow.Steps.splice(index, 1)
      if (last != null) {
        last.FLS_NextStepId = step.FLS_NextStepId
        last.IsModified = true
      }
      this.$forceUpdate()
    },
    combineStep(step, index) {
      var last = this.flow.Steps.find((s) => s.FLS_NextStepId == step.FLS_Guid)
      //将分支节点删除并将分支下审核节点合并到主干节点中
      this.flow.Steps.splice(index, 1, ...step.Branchs[0].Steps)
      step.Branchs[0].Steps.forEach(
        (x) => (x.FLS_Position = 10) //设为主干节点
      )
      if (last != null) {
        last.IsModified = true
        last.FLS_NextStepId = step.Branchs[0].FLB_NextStepId
      }
      this.$forceUpdate()
    },
  },
  mounted: function () {},
}
</script>